<!-- Font Awesome CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/font-awesome.min.css'>
<!---Bootstrap CSS-->
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/datepicker.css'>
<!-- App CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-admin-belize.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-flat.css'>

<!--BootStrap JavaScript-->
<script src='/lib/bootstrap/js/bootstrap.min.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/jquery.bootstrap.wizard.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootbox.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-datepicker.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-typeahead.js' type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#myTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("#sortTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

    });

</script>
<script src="/js/utility/FileSaver.min.js" type="text/javascript"></script>
<style>
    table td, table th {
        vertical-align: middle;
        height: 50px;
        text-align: center;
        font-size: 13px;
    }
</style>

<div>
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#inviteList">Invite</a></li>
        <li><a data-toggle="tab" href="#inviteSentList" ng-click="initInviteSentList('all')">Invites Sent</a></li>
    </ul>
    <!--<button style="margin-left: 20px;" class="btn-secondary btn-sm" ng-click="printOut()">ViewCacheStatus</button><br>-->

    <div class="tab-content">
        <div class="tab-pane active" id="inviteList">
            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">小区名称:</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="invite.comm"
                            ng-change="refreshInviteList(invite.comm)">
                        <option value="">全部</option>
                    </select><br/>
                </form>
            </div>
            <div><span id="loadingInviteText" style="color:red; text-align: center"></span></div>
            <button ng-click="exportInviteListData()">Export</button>

            <div id="exportable1">
                <table class="table table-condensed">
                    <thead>
                    <tr>
                        <th>Inviter</th>
                        <th>Inviter Id</th>
                        <th>Inviter 小区</th>
                        <th>Invitee</th>
                        <th>Invitee Id</th>
                        <th>Invitee 小区</th>
                        <th>Date Created</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="invite in inviteList">
                        <td>{{invite.inviter}}</td>
                        <td>{{invite.inviterId}}</td>
                        <td>{{invite.inviterCommName}}</td>
                        <td>{{invite.invitee}}</td>
                        <td>{{invite.inviteeId}}</td>
                        <td>{{invite.inviteeCommName}}</td>
                        <td>{{invite.dateCreated}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="tab-pane" id="inviteSentList">
            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">小区名称:</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="inviteSent.comm"
                            ng-change="refreshInviteSentList(inviteSent.comm)">
                        <option value="">全部</option>
                    </select><br/>
                </form>
            </div>
            <div><span id="loadingInviteSentText" style="color:red; text-align: center"></span></div>
            <button ng-click="exportInviteSentListData()">Export</button>
            <div id="exportable2">
                <!--<span class="label">Ordered By: {{orderByField}}, Reverse Sort: {{reverseSort}}</span><br><br>-->
                <table class="table table-condensed">
                    <thead>
                    <tr id="sortTab">
                        <th>
                            <a href="#" ng-click="orderByField='dc'; reverseSort = !reverseSort">
                                日期
                            <span ng-show="orderByField == 'dc'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='communityName'; reverseSort = !reverseSort">
                                小区
                            <span ng-show="orderByField == 'communityName'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='uid'; reverseSort = !reverseSort">
                                用户id
                            <span ng-show="orderByField == 'uid'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='nickName'; reverseSort = !reverseSort">
                                用户名称
                            <span ng-show="orderByField == 'nickName'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='invitationShared'; reverseSort = !reverseSort">
                            邀请数
                            <span ng-show="orderByField == 'invitationShared'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='invitationSuccessful'; reverseSort = !reverseSort">
                            邀请成功数
                            <span ng-show="orderByField == 'invitationSuccessful'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="inviters in inviteSentList|orderBy:orderByField:reverseSort">
                        <td>{{inviters.dc}}</td>
                        <td>{{inviters.communityName}}</td>
                        <td>{{inviters.uid}}</td>
                        <td>{{inviters.nickName}}</td>
                        <td>{{inviters.invitationShared}}</td>
                        <td>{{inviters.invitationSuccessful}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>